<template>
    <div class="moneyPackage">
        <!--顶部-->
        <van-nav-bar
                :border="false"
                title="我的钱包"
                right-text="账单"
                left-arrow
                @click-left="toBack"
                @click-right="billBtn">
        </van-nav-bar>
        <div class="bg-white-pk">
            <div @click="remainMoney"
                 class="d-flex-pk page-pad-pk pad-item-page ">
                <div>
                    <img src="../../assets/images/myMoneyIcon.png" alt="myIcon" class="myIcon">
                </div>
                <div class="light-border-bottom-pk d-flex-pk flex-fill">
                    <div class="flex-fill text-black-pk font-size-14-pk">
                        我的余额
                    </div>
                    <div v-if="userInfo.money" class="">
                        <span class="text-black-pk">{{userInfo.money}}</span> <span class="left"> > </span>
                    </div>
                    <div v-else class="font-size-16-pk">
                        <span class="text-black-pk">0.00</span> <span class="left"> > </span>
                    </div>
                </div>
            </div>
            <div v-show="myRedPackage" class="d-flex-pk page-pad-pk pad-item-page">
                <div>
                    <img src="../../assets/images/myMoneyIcon.png" alt="myIcon" class="myIcon">
                </div>
               <div class="d-flex-pk light-border-bottom-pk flex-fill">
                   <div class="flex-fill text-black-pk font-size-14-pk">
                       我的红包
                   </div>
                   <div class="font-size-16-pk">
                       <span class="text-black-pk ">有红包</span> <span class="left"> > </span>
                   </div>
               </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:"moneyPackage",
        data(){
            return{
                userInfo:{},
                money:"",
                redPackage:"",
                myRedPackage:false,
            }
        },

        created(){
            this.getUserInfo();
        },
        methods:{
            toBack(){
                this.$router.push({
                    name:'personalCenter'
                })
            },
            //获取用户信息
            getUserInfo(){
                this.$api.getUserInfo('1').then(res=>{
                    let result=this.$resData(res);
                    if(result){
                        this.userInfo=result;
                        this.money=this.userInfo.money;
                    }
                })

            },
            //查看余额
            remainMoney(){
                this.$router.push({
                    name:"remainMoney"
                })
            },
            //账单
            billBtn(){
                this.$router.push({
                    name:"billList"
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .moneyPackage{
        line-height: 1.8;
        .pad-item-page{
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .flex-fill{
            flex: 1 1 auto ;
        }

        .myIcon{
            width: 22px;
            height: 22px;
            padding-right: 5px;
        }
        .left{
            color: #CCCCCC;
        }
    }
</style>
